<template>
  <div>
    <el-dialog
      :visible.sync="tableShow"
      @close="handleClickDeal('cancel', 'table')"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      title="表达式选择"
      append-to-body
      :modal="false"
      v-dialog-drag
    >
      <el-button class="el-icon-plus add" type="primary" size="mini" @click="addForm('add')"
                 style="margin-bottom: 10px">&nbsp;新增
      </el-button>
      <!-- 表格  -->
      <el-table
        ref="tableData"
        :data="tableData"
        highlight-current-row
        @row-dblclick="dbSelected"
      >
        <el-table-column prop="expression" label="表达式"/>
        <el-table-column prop="description" label="描述"/>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" class="el-icon-edit" @click="addForm('edit',scope.row)"></el-button>
            <el-button size="mini" type="danger" class="el-icon-delete"
                       @click="handleClickDeal('delete',null,scope.row, tableData)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        :page-size="search.pageSize"
        :total="search.total"
        prev-text="上一页"
        next-text="下一页"
        @size-change="sizeChangeHandler($event)"
        :current-page="search.pageNo+1"
        @current-change="paginationChange"
      >
      </el-pagination>
    </el-dialog>


    <!-- 新增弹窗   -->
    <el-dialog
      v-if="formShow"
      :visible.sync="formShow"
      @close.stop="handleClickDeal('cancel')"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      title="新增"
      :modal="false"
      append-to-body
      width="35%"
    >
      <el-form :model="form" label-width="70px" size="small">
        <el-form-item label="表达式">
          <el-input v-model="form.expression"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClickDeal('cancel','form')"> 取 消
        </el-button>
        <loading-button size="medium" type="primary" @click="handleClickDeal('submit', $event)">保 存</loading-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import expression from '@/api/wf/expression'
import msgUtil from '@/utils/msgUtil'
import LoadingButton from '@/components/LoadingButton';

export default {
  name: "expression-detail",
  components: {
    LoadingButton,
  },
  props: {
    postDetail: {
      type: Object,
      default: {
        show: false
      }
    }
  },
  data() {
    return {
      tableShow: false,
      tableData: [],
      search: {
        pageSize: 10,
        total: 10,
        pageNo: 0,
        procDefKey: '',
        taskDefKey: ''
      },
      formShow: false,
      listLoading: false,
      detailType: 'add',
      form: {
        desc: '',
        expression: ''
      }
    }
  },
  methods: {
    addForm(type, row) {
      this.formShow = true
      this.detailType = type
      if (type == 'edit') {
        this.getDetail(row.id)
      }

    },
    getDetail(detailId) {
      expression.findOne(detailId).then(response => {
        this.form = response.data
      })
    },
    reset() {
      this.detailType = 'add'
      this.form = {
        description: '',
        expression: '',
        procDefKey: '',
        taskDefKey: ''
      }
    },
    async listTable() {
      this.listLoading = true
      await expression.listPage(this.search).then(response => {
        this.tableData = response.data.content
        this.search.total = response.data.totalElements
        this.listLoading = false
        return;
      })
    },
    handleClickDeal(type, flag, row, rows) {
      switch (type) {
        // 取消，关闭窗口
        case 'cancel':
          if (flag === 'form') {
            this.formShow = false
          } else {
            this.tableShow = false
          }
          this.reset()
          break
        // 保存
        case 'submit':
          this.form.procDefKey = this.postDetail.param.procDefKey
          this.form.taskDefKey = this.postDetail.param.taskDefKey
          this.form.type = this.postDetail.type
          this.submitDetail(flag)
          this.formShow = false
          break
        // 删除
        case 'delete':
          this.handleDelete(row)
          break
      }
    },
    submitDetail(callback) {
      if (this.detailType === 'add') {
        const that = this
        expression.add(this.form).then(res => {
          msgUtil.success2('新增成功')
          this.detailId = res.data
        }).finally(() => {
          this.listTable()
          callback && callback();
          this.reset()
        })
      } else if (this.detailType === 'edit') {
        expression.edit(this.form).then(res => {
          this.detailId = res.data
          msgUtil.success2('修改成功')
        }).finally(() => {
          this.listTable()
          callback && callback();
          this.reset()
        })
      }
    },
    // 删除
    handleDelete(row) {
      this.$confirm('确认删除数据?').then(async () => {
        const ids = []
        ids.push(row.id)
        await expression.del(ids)
        msgUtil.success2('删除成功!')
        this.listTable()
        if (row.type = 'signalRef') {
          this.$emit('delete', row)
        }
      })
    },
    paginationChange(index) {
      this.search.pageNo = index - 1
      this.listTable()
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.search.pageSize = e
      this.search.pageNo = 0
      this.listTable();
    },
    dbSelected(row) {
      this.tableShow = false
      const param = {}
      param[this.postDetail.type] = row.expression
      this.$emit('updateExpression', param)
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {
    async postDetail(value) {
      console.log('value', value)
      this.tableShow = value.show
      this.search.procDefKey = value.param.procDefKey
      this.search.taskDefKey = value.param.taskDefKey
      this.search.type = value.type
      await this.listTable()
      if (value.param[value.type]) {
        let obj = this.tableData.find(item => {
          return item.expression == value.param[value.type]
        })
        if (obj) {
          this.$refs.tableData.setCurrentRow(obj)
        }
      }

    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog {
    border-radius: 3px;
  }
  .el-dialog__body {
    padding: 30px;
  }

}
</style>
